<template>
	<view class="live-index-container">
		<view class="lic-list">
			<view v-for="(item, index) in 10" :key="index" class="lic-item bg-ff">
				<image
					src="https://oss.suqzp.com/sqzp/common/R56mm5eRFi.png"
					class="lic-item-img"
					mode="aspectFill"
				></image>
				<view class="lic-item-tit fs-32">大家好，直播了！</view>
				<view class="flex aie jcsb">
					<view class="fc-99 f-28">2022-06-17 21:21:00</view>
					<!-- <view class="lic-item-btn" @click="goLive(item.roomid)">预告</view> -->
					<!-- <view class="lic-item-btn" @click="goLive(item.roomid)">看回放</view> -->
					<view class="lic-item-btn btn1" @click="goLive(item.roomid)">直播中</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			page: 1,
			pageSize: 15,
			more: true,

			list: []
		}
	},
	onShow() {
		// this.getList()
	},
	onLoad() {
		uni.redirectTo({
			url: '/pages/index/tabbar'
		})
	},
	onReachBottom() {
		if (!this.more) return

		this.page++
		// this.getList(this.page);
	},
	methods: {
		async getList(page = 1) {
			let param = {
				page: page || 1,
				limit: this.pageSize
			}
			let res = await this.$apis.getLiveList(param)
			if (res.code == 200) {
				if (page == 1) {
					this.list = res.rows
				} else {
					this.list.concat(...res.rows)
				}

				this.more = res.rows.length == this.pageSize
			}
		},
		goLive(id) {
			// uni.navigateTo({
			// 	url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${id}`
			// })
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #f6f6f6;
}

.live-index-container {
	.lic-list {
		padding: 32rpx;

		.lic-item {
			padding: 26rpx;
			margin-bottom: 26rpx;
			border-radius: 12rpx;

			.lic-item-img {
				width: 100%;
				height: 306rpx;
				border-radius: 12rpx;
			}

			.lic-item-tit {
				margin: 20rpx 0;
			}

			.lic-item-btn {
				width: 236rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				font-size: 32rpx;
				border: 1px solid #8ec8fa;
				color: #45a0fb;
				border-radius: 12rpx;
			}

			.btn1 {
				color: #fff;
				background: #84c0f4;
			}
		}
	}
}
</style>
